<template>
  <div class="app-container goods">
    <!-- 筛选部分 -->
    <div class="app-container-hd">
      <div class="toolbar-search">
        <div class="table-top-button">
          <div>
            <el-button icon="el-icon-printer" type="primary" size="mini" @click="handlePrint">单据打印</el-button>
            <el-button icon="el-icon-download" type="primary" size="mini" @click="handleExport">导出数据</el-button>
          </div>
          <div>
            <el-button v-if="showSearch" type="primary" @click="showSearch = false">收起<i class="el-icon-arrow-up el-icon--right" /></el-button>
            <el-button v-else type="primary" @click="showSearch = true">展开<i class="el-icon-arrow-down el-icon--right" /></el-button>
          </div>
        </div>
        <el-form v-if="showSearch" ref="searchParams" :model="searchParams" :inline="true" size="mini" @keyup.enter.native="handleSearch">
          <el-form-item label="场次:" prop="bid_id">
            <el-select v-model="searchParams.bid_id" placeholder="不选默认显示当前进行中场次" clearable>
              <el-option v-for="item in bidList" :key="item.bid_id" :label="item.bid_name" :value="item.bid_id" />
            </el-select>
          </el-form-item>
          <el-form-item label="标号:" prop="goods_code">
            <el-input v-model="searchParams.goods_code" placeholder="请输入标号" style="width: 180px" />
          </el-form-item>
          <el-form-item label="用户姓名:" prop="user_name">
            <el-input v-model="searchParams.user_name" placeholder="请输入用户姓名" style="width: 180px" />
          </el-form-item>
          <el-form-item label="用户电话:" prop="user_phone">
            <el-input v-model="searchParams.user_phone" placeholder="请输入用户电话" style="width: 180px" />
          </el-form-item>
          <el-form-item label="首次投标时间:" prop="first_at">
            <el-date-picker
              v-model="searchParams.first_at"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
          <el-form-item label="最新投标时间:" prop="new_at">
            <el-date-picker
              v-model="searchParams.new_at"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
          <div class="form-button">
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="handleSearch">筛选</el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" @click="handleSearch('searchParams', 'reset')">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <!-- 表格部分 -->
      <div v-loading="$store.state.app.loading" class="table-main fixed">
        <el-table
          highlight-current-row
          :data="listData"
          :border="true"
          height="600"
          :empty-text="$store.state.app.loading ? '正在加载数据' : null"
        >
          <el-table-column prop="image" label="图片" width="88" align="center">
            <template slot-scope="item">
              <el-image
                style="width: 70px; height: 70px;margin-top: 8px;margin-left: -2px;cursor: pointer"
                :src="item.row.goods && item.row.goods.cover | media"
                fit="cover"
                @click="previewImages(item.row)"
              ><div slot="error" class="image-slot"><i class="el-icon-picture-outline" /></div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="bid.bid_code" label="场次代码" width="120" />
          <el-table-column prop="goods.goods_code" label="标号" width="120" />
          <el-table-column prop="user.name" label="用户姓名" min-width="80" />
          <el-table-column prop="user.phone" label="用户电话" width="120" />
          <el-table-column prop="first_at" label="首次投标时间" width="160" />
          <el-table-column prop="new_at" label="最新投标时间" width="120" />
          <el-table-column prop="bid_goods_count" label="投标次数" width="100" />
          <el-table-column prop="min_price" label="投标最底价" width="100" />
          <el-table-column prop="max_price" label="投标最高价" sortable width="140" />
          <el-table-column prop="action" label="标品投标详情" min-width="120">
            <template slot-scope="item">
              <div class="button-group">
                <el-button type="text" size="mini" @click="handleDetail(item.row)">查看投标详情</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="app-container-ft">
      <paginate :total="searchParams.total" :per-page="searchParams.per_page" :page="searchParams.page" @paginate-change="handleSearch" />
    </div>

    <!-- 数据编辑弹窗 -->
    <bid-detail
      v-if="showDetail"
      :search-data="searchDetail"
      @on-cancel-modal="acceptCancelModal"
    />
    <!-- 打印弹窗 -->
    <Print
      v-if="printModal"
      :print-data="printData"
      :tpl-id="tplId"
      :tpl-list="tplList"
      :cache-mark="cacheMark"
      @on-cancel-modal="acceptCancelModal"
    />

    <!-- Excel数据导出 -->
    <Export
      v-if="showExport"
      :field-list="exportFields"
      :data-list="dataList"
      @on-cancel-modal="acceptCancelModal"
    />

    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="viewerList"
      style="z-index: 3000;"
    />
  </div>
</template>

<script>
import bidDetail from './components/bidDetail'
import Export from './components/exportBidGoods'
import Print from '@/components/Print'
import Paginate from '@/components/Paginate/index'
import { getBidGoodsSummaryUser, initialGoods } from '@/api/bid'
import { getPrintTplList } from '@/api/print-tpl'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { info } from '@/api/goods'
import { mediaFilter } from '@/utils/filters'

export default {
  components: { Paginate, bidDetail, Export, Print, ElImageViewer },
  data: function() {
    return {
      listData: [],
      initial: true,
      supplierList: [],
      bidList: [],
      selected: [],
      multipleSelection: [],

      printModal: false,
      tplId: null,
      tplList: [],
      printData: null,
      cacheMark: null,

      showExport: false,
      exportFields: null,
      dataList: [],

      showViewer: false,
      viewerList: [],

      searchDetail: null,
      showDetail: false,

      itemData: null,
      isUpdate: false,
      showModal: false,
      showSearch: true,
      searchParams: {
        bid_id: null,
        goods_code: null,
        user_name: null,
        user_phone: null,
        first_at: null,
        new_at: null,
        order: 'max_price',
        by: 'desc',
        total: null,
        page: null,
        per_page: 100
      }
    }
  },
  mounted: function() {
    this.searchParams.bid_code = this.$route.query.bid_code || null
    this.searchParams.goods_code = this.$route.query.goods_code || null
    // 初始化方法
    this.initialize()
  },
  methods: {
    // 初始化数据列表
    initialize: function() {
      // 获取数据列表
      this.$store.commit('app/SET_LOADING', true)
      if (this.initial) {
        initialGoods(this.searchParams, function(res) {
          if (res !== false) {
            // this.listData = res[0].data
            // this.searchParams.total = parseInt(res[0].total)
            // this.searchParams.page = parseInt(res[0].current_page)
            // this.searchParams.per_page = parseInt(res[0].per_page)
            this.supplierList = res[0].data
            this.bidList = res[1].data
          }
          this.$nextTick(function() {
            this.initial = false
            this.$store.commit('app/SET_LOADING', false)
            if (this.bidList && this.bidList.length > 0) {
              const tmp = this.bidList.find(e => e.status === 1)
              console.log(tmp)
              this.searchParams.bid_id = tmp ? tmp.bid_id : this.bidList[0].bid_id
              console.log(this.searchParams)
              this.initialize()
            }
          })
        }.bind(this))
      } else {
        getBidGoodsSummaryUser(this.searchParams).then(res => {
          this.listData = res.data
          this.searchParams.total = parseInt(res.total)
          this.searchParams.page = parseInt(res.current_page)
          this.searchParams.per_page = parseInt(res.per_page)
          this.$nextTick(function() {
            this.$store.commit('app/SET_LOADING', false)
          })
        })
      }
    },
    // 根据条件筛选数据
    handleSearch: function(value, field) {
      // 重置表单数据
      if (field === 'reset') {
        this.searchParams.page = 1
        this.searchParams.first_at = null
        this.searchParams.new_at = null
        this.$refs[value].resetFields()
        // 页码参数变更
      } else if (field) {
        this.searchParams.page = 1
        this.searchParams[field] = value
      }
      this.initialize()
    },
    handleDetail(row) {
      this.searchDetail = {
        bid_id: row.bid_id,
        goods_id: row.goods_id,
        user_id: row.user_id
      }
      this.showDetail = true
    },
    // 关闭数据编辑窗口
    acceptCancelModal: function(modal, refresh = false) {
      if (refresh === true) {
        this.initialize()
      }
      this[modal] = false
    },
    // 单据打印
    handlePrint() {
      this.cacheMark = 'print-bid-goods'
      this.$store.commit('app/SET_LOADING', true)
      this.tplId = parseInt(localStorage.getItem(this.cacheMark))
      const params = { ...this.searchParams, is_export: 1 }
      Promise.all([
        getBidGoodsSummaryUser(params),
        getPrintTplList({ mode: 'bid_goods' })
      ]).then(res => {
        if (res !== false) {
          console.log(res)
          this.printData = this.handlePrintData(res[0].data)
          this.tplList = res[1].data
        }
        this.printModal = true
        this.$nextTick(function() {
          this.$store.commit('app/SET_LOADING', false)
        })
      })
    },
    handlePrintData(data) {
      const lists = data.map((e, index) => {
        return {
          ...e,
          index: index + 1
        }
      })
      console.log(lists)
      return {
        lists: lists
      }
    },
    handleExport: function() {
      this.exportFields = JSON.parse(localStorage.getItem('export-bid-goods-fields'))
      this.$store.commit('app/SET_LOADING', true)
      const params = { ...this.searchParams, is_export: 1 }
      getBidGoodsSummaryUser(params).then(res => {
        this.dataList = this.handlePrintData(res.data).lists
        this.showExport = true
        this.$nextTick(function() {
          this.$store.commit('app/SET_LOADING', false)
        })
      })
    },
    previewImages: function(item) {
      this.$store.commit('app/SET_LOADING', true)
      info({ goods_id: item.goods_id }).then(res => {
        this.viewerList = res.data.images.map(e => mediaFilter(e.path))
        // console.log(this.itemData)
        this.showViewer = true
        this.$nextTick(function() {
          this.$store.commit('app/SET_LOADING', false)
        })
      })
    },
    closeViewer() {
      console.log('closeViewer')
      this.showViewer = false
    }
  }
}
</script>
<style lang="scss">
.goods .el-table {
  th {
    height: 48px;
    line-height: 48px;
  }
  td {
    height: 47.5px;
    color: #909399;
    line-height: 35px;
  }
  .el-table__expanded-cell .el-table {
    margin-left: 20px;
  }
}
</style>

<style lang="scss" scoped>
.table-top-button {
  display: flex;
  padding-bottom: 10px;
  justify-content: space-between;
}
</style>
